<template>
  <div class="columnModel" id="columnModel">
    <!-- 功能按钮 -->
    <div class="columnModel_button">
      <a-button class="addButtons" type="primary" @click="addSpecial('add')"
        ><template #icon>
          <span class="iconfont icon-Add iconadd"></span> </template
        >新建</a-button
      >
      <div class="searchContent">
        <a-input
          v-model:value="searchName"
          placeholder="搜索专题名称"
          style="width: 192px"
          allow-clear
          @pressEnter="onSearch"
          @blur="onSearch"
        >
          <template #suffix>
            <i class="iconfont icon-search" @click="onSearch"></i>
          </template>
        </a-input>
        <!-- 创建时间 -->
        <span class="selectLable">创建时间：</span>
        <date-range-picker
        style="width: 350px"
          v-model:value="timeValue"
          :disabledInfo="disabledInfo"
          @change="changeTime"
          :showTime="{
        hideDisabledOptions: true,
        defaultValue: [dayjs('00:00:00', 'HH:mm:ss')],
      }"
        ></date-range-picker>
      </div>
    </div>

    <!-- 表格展示部分 -->
    <baseTable
      :columns="columns.visualProject"
      :dataSource="configData.records"
      :row-selection="1"
      :isSelect="true"
      :scroll="scroll"
      ref="searchBaseTables"
      :isShowPagination="isShowPagination"
      :showCheckDelete="showCheckDelete"
      :total="configData.total"
      @changePage="changePage"
      disabledParam="status"
      :disabledValue="true"
    >
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.ellipsis">
          <table-tool-tip :text="text" :column="column"></table-tool-tip>
        </template>
        <template v-if="column.dataIndex === 'oparation'">
          <a class="eidtRecords" @click="EditSpecial(record, 'edit')">编辑</a>
          <a class="eidtRecords" @click="goSpecialDetail(record)">专题详情</a>
          <a-popconfirm
            placement="topRight"
            ok-text="确定"
            cancel-text="取消"
            @confirm="confirmDelete(record)"
          >
            <template #title>
              <p style="width: 197px">删除后专题内数据一并删除，是否确定删除？</p>
            </template>
            <a>删除</a>
          </a-popconfirm>
        </template>
      </template>
    </baseTable>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  reactive,
  onMounted,
  nextTick,
} from "vue";
import dayjs, { Dayjs } from 'dayjs';
import baseTable from "@/components/table/baseTable.vue";
import tableToolTip from "@/components/table/tableToolTip.vue";
import columns from "@/components/table/tableConfig/columnsName";
import { getTableScroll } from "@/components/table/tableConfig/table";
import { useRouter } from "vue-router";
import { Modal, message } from "ant-design-vue";
import request from "@/api/index";
import { scrollType, modeProp } from "@/type.d";
import dateRangePicker from "@/components/picker/dateRangePicker.vue";

// type
type configDataType = {
  total: number;
  size: number;
  records: any[];
};
interface dataSourceType {
  [propName: string]: any;
}

//data
let scroll: scrollType = reactive({ y: "", isFixed: false }); // 表单滚动设置
const isShowPagination = true; // 是否需要配分页器
const showCheckDelete = false; // 是否需要分页器中的自定义全选和删除
const router = useRouter();
const timeValue = ref<(string | number)[]>([]); // 创建时间
let params: dataSourceType = reactive({
  //头部筛选请求参数格式
  pageNumber: 1,
  pageSize: 20,
});
//表格数据
let configData = reactive<configDataType>({ total: 0, size: 20, records: [] });
const searchBaseTables = ref<any>(null);
const searchName = ref<string | number>("");
// 当前页和数量
const pageCurrent = ref<number>(1);
const pageSize = ref<number>(20);
const disabledInfo = ref({
  // 禁止选择
  type: 2,
  startDays: 0,
});
//methods
// 切换时间
const changeTime = (data: any) => {
  if (data) {
    params.fileTimeStart = data[0];
    params.fileTimeEnd = data[1];
  } else {
    params.fileTimeStart = undefined;
    params.fileTimeEnd = undefined;
  }
  getRdecord();
};

// 编辑页
const EditSpecial = (item: any, type: any) => {
  router.push({
    path: "/colunm/specialTopic/specialOprations",
    query: {
      id: item.id,
      type,
    },
  });
};

// 新建页
const addSpecial = (type: any) => {
  router.push({
    path: "/colunm/specialTopic/specialOprations",
    query: {
      type,
    },
  });
};

//详情
const goSpecialDetail = async (item: dataSourceType) => {
  router.push({
    path: "/colunm/specialTopic/specialDetail",
    query: {
      id: item.id
    }
  })
  
};

// 删除
const confirmDelete = (item: any) => {
  request
    .topicDelete({ id: item.id })
    .then((res: any) => {
      if (res.code == "00000 00000") {
        message.success(res.message);
        getRdecord({});
      } else {
        message.error(res.message);
      }
    })
    .catch((err: any) => {
      throw new Error(err);
    });
};

const onSearch = async () => {
  //搜索获取数据参数配置
  getRdecord();
};
const getRdecord = async (datas: dataSourceType = {}) => {
  // 获取表格数据
  const data: {} = {
    name: searchName.value,
    pageNumber: datas.pageNumber || pageCurrent.value,
    pageSize: datas.pageSize || pageSize.value,
    createTimeStart: params.fileTimeStart,
    createTimeEnd: params.fileTimeEnd,
  };
  const telData = (await request.topicPage(data)) || {};
  configData.records = telData.records;
  configData.total = telData.total;
  configData.size = telData.size;

  nextTick(() => {
    scroll.y = getTableScroll(74, "columnModel").y;
    scroll.isFixed = getTableScroll(74, "columnModel").isFixed;
  });
};

//切换分页器
const changePage = (data: { pageCurrent: any; pageSize: any }) => {
  let datas: dataSourceType = {
    pageNumber: data.pageCurrent,
    pageSize: data.pageSize,
  };
  getRdecord(datas);
  pageCurrent.value = data.pageCurrent;
  pageSize.value = data.pageSize;
};

//onmounted
onMounted(() => {
  getRdecord();
});
</script>
<style lang="scss" scoped>
.columnModel {
  width: 100%;
  height: calc(100% - 72px);
  padding: 16px;
  background-color: #fff;
  overflow: hidden;

  .columnModel_button {
    margin-bottom: 15px;
    height: 32px;
    display: flex;
    justify-content: space-between;

    .addButton {
      display: flex;
      align-items: center;
      margin-right: 8px;
      .iconadd {
        font-size: 24px;
        margin-right: 4px;
      }
    }

    .importButton {
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      margin-right: 8px;
    }

    .modelSelect {
      margin-left: auto;
      margin-right: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .modelSelectStatus {
      margin-left: 4px;
      margin-right: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
    }

    .searchContent {
      margin-right: 0px;

      .icon-search {
        font-size: 15px;
        color: rgba(0, 0, 0, 0.45);
        position: absolute;
        right: 5px;
        top: 4px;
      }
    }
  }
  ::v-deep(.anticon.ant-input-clear-icon-has-suffix) {
    margin-right: 12px;
  }

  :deep(.ant-table-thead .ant-table-cell:nth-last-of-type(1)) {
    text-align: right;
  }
  :deep(.ant-table-cell:nth-child(3)) {
    text-align: center;
  }
  .eidtRecords {
    margin-right: 16px;
  }

  .disable {
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
  }
}

.model-tip {
  margin-top: 8px;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.45);
}

.tag-item {
  margin-bottom: 0 !important;
}

:deep(.ant-form-item:nth-last-of-type(1)) {
  margin-left: 0px;
}

::v-deep(.ant-input-number) {
  width: 136px;
  margin-left: 4px;
}

::v-deep(.ant-input-affix-wrapper) {
  width: 514px;
  margin-left: 4px;
}

::v-deep(.ant-form-item) {
  display: flex;

  .ant-form-item-label {
    flex-grow: 0;
    width: 80px;
    text-align: right;
  }
}

::v-deep(.ant-select) {
  width: 96px;
}

::v-deep(.ant-form-item-control-input-content:hover) {
  .anticon-close-circle {
    display: block;
  }

  // .ant-input-show-count-suffix {
  //   // display: none;
  // }
}

::v-deep(.ant-btn) {
  padding: 4px 12px;
}
.addButtons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90px;
  height: 32px;
  margin-bottom: 10px;
  font-size: 14px;
  .iconadd {
    font-size: 24px;
    margin-right: 4px;
  }
}
.selectLable {
  font-size: 14px;
  margin-left: 15px;
}
</style>
